import React from 'react';

class ListOfWords extends React.Component {
    render() {
        return (
            <div>{this.props.words.join(',')}</div>
        );
    }
}

class WordAdder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            words: ['marklar']
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        // This section is bad style and causes a bug
        const words = this.state.words;
        words.push('marklar');
        this.setState({words: words});
        console.log(this.state.words);
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>按钮</button>
                <ListOfWords words={this.state.words} />
            </div>
        );
    }
}

export default WordAdder;